<template>
  <!-- <el-carousel :height="heightimg" autoplay>
    <el-carousel-item v-for="item in bannerList" :key="item">
      <img :src="item.imgUrl" class="banner-imgs" />
    </el-carousel-item>
  </el-carousel> -->
  <div class="home-main">
    <div class="project-search-tab">
      <div class="tab-list">
        <div
          v-for="(item, index) in tabList"
          :key="index"
          :class="{ active: item.value == queryParams.sortingType }"
          @click="handleTab(item.value)"
        >
          {{ item.label }}
        </div>
      </div>
      <div class="home-search">
        <el-input
          v-model="queryParams.proName"
          placeholder="请输入检索词"
          class="input-with-select"
          clearable
          style="cursor: pointer"
          @keyup.enter="getList()"
        >
          <template #append>
            <span @click="getList()">检索</span>
          </template>
        </el-input>
      </div>
    </div>
    <template v-if="projectList.length > 0">
      <div class="project-list" v-if="queryParams.proType != 2">
        <el-card
          v-for="item in projectList"
          :key="item.id"
          class="project-card"
        >
          <div class="project-card-content">
            <div
              class="project-img"
              :style="`background-image: url('${item.url}')`"
            ></div>
            <div class="project-info">
              <div
                class="project-title"
                @click="goDetail(item.id)"
                :title="item.proName"
              >
                <span>{{ item.proName }}</span>
              </div>
              <div class="project-sum">
                <span
                  :title="item.teacher"
                  v-if="queryParams.proType != 24 && queryParams.proType != 25"
                  >{{ labelConfig.teacher[queryParams.proType] }}：{{
                    item.teacher
                  }}</span
                >
                <span :title="item.teacher" v-else
                  >{{ labelConfig.teacher[queryParams.proType] }}：{{
                    item.chargePerson
                  }}</span
                >
              </div>
              <div class="project-sum">
                <span
                  >{{ labelConfig.text[queryParams.proType] }}：{{
                    filtersText(item.title)
                  }}</span
                >
              </div>
              <div class="project-sum">
                <span
                  >{{ labelConfig.proTime[queryParams.proType] }}：{{
                    item.startTime
                  }}至{{ item.endTime }}</span
                >
              </div>
              <div class="project-sum" v-if="item.registrationType == '1'">
                <span
                  >报名时间：{{ item.registrationStartTime }}至{{
                    item.registrationEndTime
                  }}</span
                >
              </div>
            </div>
            <div class="project-enter">
              <span>{{ item.projectType }}</span>
            </div>
          </div>
        </el-card>
      </div>
      <div class="course-list" v-else>
        <el-card v-for="item in projectList" :key="item.id" class="course-card">
          <div class="course-card-content">
            <div
              class="course-img"
              :style="`background-image: url('${item.url}')`"
              @click="goDetail(item.id)"
            ></div>
            <div
              class="course-title"
              @click="goDetail(item.id)"
              :title="item.proName"
            >
              <span>{{ item.proName }}</span>
            </div>
            <div class="course-info">
              <div class="course-sum">
                <span>{{ item.sum }}人已学习</span>
              </div>
              <div class="course-sum">
                <span :title="item.teacher"
                  >{{ labelConfig.teacher[queryParams.proType] }}：{{
                    item.teacher
                  }}</span
                >
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </template>
    <template v-else>
      <p style="text-align: center; padding: 50px 0; font-weight: bold">
        暂无数据
      </p>
    </template>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageDomain.pageNum"
      v-model:limit="queryParams.pageDomain.pageSize"
      :page-sizes="
        queryParams.proType == 2 ? [8, 16, 24, 30, 36] : [10, 20, 30, 40, 50]
      "
      @pagination="getList"
    />
  </div>
</template>
<script setup name="HomeIndex">
import { getProjectList, getHomeExcellentList } from "@/api/home/home";
import defaultSettings from "@/settings";
import { getBannerList } from "@/api/system/banner";
import useActivityStore from "@/store/modules/activity";

const route = useRoute();
const router = useRouter();

const projectList = ref([]);
const bannerList = ref([]);
const activityType = ref([]);
const tabList = [
  {
    label: "最热",
    value: "最热",
    id: 1,
  },
  {
    label: "最新",
    value: "最新",
    id: 2,
  },
  {
    label: "优秀作品",
    value: "推荐",
    id: 3,
  },
];

let heightimg = ref("0px");
const total = ref(0);
const queryParams = ref({
  pageDomain: {
    isAsc: "true",
    orderByColumn: "",
    pageNum: 1,
    pageSize: 10,
    reasonable: true,
  },
  proName: "",
  proType: "1",
  sortingType: "最热",
});
const labelConfig = {
  teacher: {
    2: "主讲人",
    3: "负责人",
    4: "负责人",
    24: "主办方",
    25: "主办方",
    26: "负责人",
  },
  text: {
    2: "课程介绍",
    3: "实验介绍",
    4: "项目介绍",
    24: "竞赛介绍",
    25: "研学特色",
    26: "活动介绍",
  },
  proTime: {
    2: "课程时间",
    3: "实验时间",
    4: "项目时间",
    24: "比赛时间",
    25: "研学时间",
    26: "活动时间",
  },
};

/** 首页最新最热推荐 */
function getList() {
    getProjectList(queryParams.value).then((res) => {
      projectList.value = res.rows;
      total.value = res.total;
    });
  // else{
  //   getHomeExcellentList({proType:queryParams.value.proType}).then((res) => {
  //     projectList.value = res.rows;
  //     total.value = res.total;
  //   });
  // }
}

//切换tab
function handleTab(value) {
  queryParams.value.sortingType = value;
  getList();
}
//跳转活动详情
function goDetail(id) {
  router.push({
    path: "/home/detail",
    query: { typeId: queryParams.value.proType, projectId: id ,tabName:queryParams.value.sortingType == "优秀作品"?'Excellent':null},
  });
}
watch(
  () => route,
  async (newRoute, oldRoute) => {
    if (newRoute.query.typeId) {
      queryParams.value.proType = newRoute.query.typeId;
      if (queryParams.value.proType == 2) {
        queryParams.value.pageDomain.pageSize = 8;
      } else {
        queryParams.value.pageDomain.pageSize = 10;
      }
      getList();
    } else {
      activityType.value = await useActivityStore().getType();
      queryParams.value.proType = activityType.value[0].bannerType;
      if (queryParams.value.proType == 2) {
        queryParams.value.pageDomain.pageSize = 8;
      } else {
        queryParams.value.pageDomain.pageSize = 10;
      }
      getList();
    }
  },
  { deep: true, immediate: true }
);

function filtersText(val) {
  // 要判断一下,如果是空就返回空字符串,不然会报错
  if (val) {
    return val.replace(/<\/?[^>]+(>|$)/g, "");
  }
}

// watch(
//   () => useActivityStore().selectedType,
//   (newId, oldId) => {
//     debugger
//     if (newId) {
//       queryParams.value.proType = newId;
//       getList();
//     }
//   },
//   { deep: true, immediate: true }
// );
</script>
<style scoped scss>
.pagination-container {
  justify-content: center;
}
</style>